<template>
  <div class="container">
      <h2>消息</h2>
    <el-table
        style="width: 100%"
        :default-sort = "{prop: 'constructDate', order: 'descending'}"
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        >
        <el-table-column
            prop="message"
            label="内容"
            >
        </el-table-column>
        <el-table-column
            prop="constructDate"
            label="日期"
            sortable
            width="200">
        </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="this.total"
        style="margin-top:20px"
        @current-change="current_change">
    </el-pagination>
  </div>
</template>

<style scoped>
    .container{
        width: 750px;
        margin: 20px auto;
        background-color: white;
        padding: 20px 30px;
        height: 650px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
</style>

<script>
  export default {
    data() {
      return {
        tableData: [],
        currentPage:1,
        pagesize:10,
        total: 0,
        account:''
      }
    },
    mounted() {
 　　　　   this.addContent();
　　},
    methods: {
      formatter(row, column) {
        return row.address;
      },
      current_change:function(currentPage){
        this.currentPage = currentPage;
      },
      addContent(){
          this.account=this.$route.params.account;
          const that=this;
          this.$axios({
                url: '/Test/user/listMessage.do',
                method:'post',
                params:{
                  account:that.account
                },
                headers:{'Content-Type': 'application/x-www-form-urlencoded'}
                }).then(function(res)
                {
                    that.tableData = res.data;
                    that.total= res.data.length;       
                });
        }
    }
  }
</script>